﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>商品浏览</title>
    <th:block th:insert="~{front/include::head}"></th:block>
    <script th:inline="javascript">
        let pi = /*[[${pi}]]*/{};
        let gsb=/*[[${gsb}]]*/{};
        const goods=/*[[${goods}]]*/[];
    </script>
</head>

<body>
<div th:replace="~{front/include::quickView}"></div>
<header th:replace="~{front/include::header}"></header>
<main class="main">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a th:href="@{/vm/front/index}" rel="nofollow">主页</a>
                <span></span> 商品
            </div>
        </div>
    </div>
    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row flex-row-reverse">
                <div class="col-lg-9">
                    <div class="shop-product-fillter">
                        <div class="totall-product">
                            <p> 共为您找到 <strong class="text-brand" th:text="${pi.getTotal()}"></strong> 件商品!</p>
                        </div>
                        <div class="sort-by-product-area">
                            <div class="sort-by-cover mr-10">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps"></i>显示:</span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span th:text="${pi.pageSize}"> <i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown">
                                    <ul>
                                        <li><a href="">6</a></li>
                                        <li><a href="">12</a></li>
                                        <li><a href="">24</a></li>
                                        <li><a href="">48</a></li>
                                        <li><a href="">全部</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="sort-by-cover">
                                <div class="sort-by-product-wrap">
                                    <div class="sort-by">
                                        <span><i class="fi-rs-apps-sort"></i>排序方式:</span>
                                    </div>
                                    <div class="sort-by-dropdown-wrap">
                                        <span> Featured <i class="fi-rs-angle-small-down"></i></span>
                                    </div>
                                </div>
                                <div class="sort-by-dropdown">
                                    <ul>
                                        <li><a class="active" href="">Featured</a></li>
                                        <li><a href="">Price: Low to High</a></li>
                                        <li><a href="">Price: High to Low</a></li>
                                        <li><a href="">Release Date</a></li>
                                        <li><a href="">Avg. Rating</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
<!--                    商品列表-->
                    <div class="row product-grid-3">
<!--                        遍历所有商品-->
                        <div  class="col-lg-4 col-md-4 col-12 col-sm-6" th:each="goodsA:${goods}">
                            <div class="product-cart-wrap mb-30">
<!--                                图片-->
                                <div class="product-img-action-wrap">
                                    <div class="product-img product-img-zoom">
                                        <a th:href="@{/vm/front/goods/detail(goodsId=${goodsA.id})}">
<!--                                            大括号是占位符，值在小括号里-->
                                            <img class="default-img" th:src="@{/assets/{url}(url=${goodsA.pic})}"
                                                 alt="">
                                            <img class="hover-img" th:src="@{/assets/{url}(url=${goodsA.pic1})}"
                                                 alt="">
                                        </a>
                                    </div>
<!--                                    行为-->
                                    <div class="product-action-1">
                                        <a aria-label="快速一览" class="action-btn hover-up quick-view-btn"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-search"></i></a>
                                        <a aria-label="添加到收藏" class="add-to-wi action-btn hover-up"
                                           th:data-goods-id="${goodsA.id}">
                                            <i class="fi-rs-heart"></i>
                                        </a>
                                        <a aria-label="查看同类" class="action-btn hover-up"
                                           th:href="@{/vm/front/goods/compare(catId=${goodsA.categoryId})}"><i
                                                class="fi-rs-shuffle"></i></a>
                                    </div>

                                </div>
<!--                                内容,种类，价格等-->
                                <div class="product-content-wrap">
                                    <div class="product-category">
                                        <a th:text="${goodsA.category==null?'':goodsA.category.name}"
                                           th:href="@{/vm/front/goods/grid(id=${goodsA.categoryId})}">种类</a>
                                    </div>
                                    <h2><a th:text="${goodsA.name}"
                                           th:href="@{/vm/front/goods/detail(id=${goodsA.id})}">商品名</a></h2>
                                    <div class="rating-result" title="90%">
                                            <span>
                                                <span>90%</span>
                                            </span>
                                    </div>
                                    <div class="product-price">
                                        <span th:text="'$'+${goodsA.price}">$238.85 </span>
                                        <span th:text="'$'+${goodsA.markPrice}" class="old-price">$245.8</span>
                                    </div>
                                    <div class="product-action-1 show">
                                        <a  aria-label="添加到购物车" th:data-goods-id="${goodsA.id}"
                                            class="action-btn hover-up add-to-cart"
                                            href="#">
                                            <i class="fi-rs-shopping-bag-add"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!--pagination  分页条-->
                    <div class="pagination-area mt-15 mb-sm-5 mb-lg-0">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-start">
<!--                                数字页-->
                                <li class="page-item " th:each="page:${pages}">
                                    <a class="page-link page-num" th:text="${page}" href="">01</a>
                                </li>

                                <!--                                首页-->
                                <li class="page-item">
                                    <a class="page-link page-first" href="">○</a>
                                </li>
                                <!--                                尾页-->
                                <li class="page-item">
                                    <a class="page-link page-last" href="" >●</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link page-next-3" href=""><i class="fi-rs-angle-double-small-right"></i></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-lg-3 primary-sidebar sticky-sidebar">
                    <div class="widget-category mb-30">
                        <h5 class="section-title style-1 mb-30 wow fadeIn animated">种类一览</h5>
                        <ul class="categories">
                            <li><a th:href="@{/vm/front/goods/grid}">Shoes & Bags</a></li>
<!--                            通过js动态填充-->
                        </ul>
                    </div>
                    <!-- Fillter By Price  筛选-->
                    <div class="sidebar-widget price_range range mb-30">
                        <div class="widget-header position-relative mb-20 pb-10">
                            <h5 class="widget-title mb-10">价格筛选</h5>
                            <div class="bt-1 border-color-1"></div>
                        </div>
                        <div class="price-filter">
                            <div class="price-filter-inner">
                                <div id="slider-range"></div>
                                <div class="price_slider_amount">
                                    <div class="label-input">
                                        <span>范围:</span><input type="text" id="amount" name="price"
                                                                  placeholder="输入价格"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="list-group">
                            <div class="list-group-item mb-10 mt-10">
                                <label class="fw-900">颜色</label>
                                <div class="custome-checkbox">
                                    <input class="form-check-input" type="checkbox" name="checkbox"
                                           id="exampleCheckbox1" value="">
                                    <label class="form-check-label" for="exampleCheckbox1"><span>Red</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox"
                                           id="exampleCheckbox2" value="">
                                    <label class="form-check-label"
                                           for="exampleCheckbox2"><span>Green</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox"
                                           id="exampleCheckbox3" value="">
                                    <label class="form-check-label"
                                           for="exampleCheckbox3"><span>Blue</span></label>
                                </div>
                                <label class="fw-900 mt-15">商品状况</label>
                                <div class="custome-checkbox">
                                    <input class="form-check-input" type="checkbox" name="checkbox"
                                           id="exampleCheckbox11" value="">
                                    <label class="form-check-label"
                                           for="exampleCheckbox11"><span>New</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox"
                                           id="exampleCheckbox21" value="">
                                    <label class="form-check-label"
                                           for="exampleCheckbox21"><span>Refurbished</span></label>
                                    <br>
                                    <input class="form-check-input" type="checkbox" name="checkbox"
                                           id="exampleCheckbox31" value="">
                                    <label class="form-check-label"
                                           for="exampleCheckbox31"><span>Used </span></label>
                                </div>
                            </div>
                        </div>
                        <a th:href="@{/vm/front/goods/grid}" class="btn btn-sm btn-default"><i
                                class="fi-rs-filter mr-5"></i> 筛选</a>
                    </div>
                    <!-- Product sidebar Widget -->
                    <div class="sidebar-widget product-sidebar  mb-30 p-30 bg-grey border-radius-10">
                        <div class="widget-header position-relative mb-20 pb-10">
                            <h5 class="widget-title mb-10">新产品</h5>
                            <div class="bt-1 border-color-1"></div>
                        </div>
                        <div class="single-post clearfix">
                            <div class="image">
                                <img th:src="@{/assets/front/imgs/shop/thumbnail-3.jpg}" alt="#">
                            </div>
                            <div class="content pt-10">
                                <h5><a th:href="@{/vm/front/shop-priproduct-detail}">Chen Cardigan</a></h5>
                                <p class="price mb-0 mt-5">$99.50</p>
                                <div class="product-rate">
                                    <div class="product-rating" style="width:90%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="single-post clearfix">
                            <div class="image">
                                <img th:src="@{/assets/front/imgs/shop/thumbnail-4.jpg}" alt="#">
                            </div>
                            <div class="content pt-10">
                                <h6><a th:href="@{/vm/front/goods/detail}">Chen Sweater</a></h6>
                                <p class="price mb-0 mt-5">$89.50</p>
                                <div class="product-rate">
                                    <div class="product-rating" style="width:80%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="single-post clearfix">
                            <div class="image">
                                <img th:src="@{/assets/front/imgs/shop/thumbnail-5.jpg}" alt="#">
                            </div>
                            <div class="content pt-10">
                                <h6><a th:href="@{/vm/front/goods/detail}">Colorful Jacket</a></h6>
                                <p class="price mb-0 mt-5">$25</p>
                                <div class="product-rate">
                                    <div class="product-rating" style="width:60%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="banner-img wow fadeIn mb-45 animated d-lg-block d-none">
                        <img th:src="@{/assets/front/imgs/banner/banner-11.jpg}" alt="">
                        <div class="banner-text">
                            <span>Women Zone</span>
                            <h4>Save 17% on <br>Office Dress</h4>
                            <a th:href="@{/vm/front/goods/grid}">购买 <i class="fi-rs-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!--页脚-->
<footer th:replace="~{front/include::footer}"></footer>
<!--加载器-->
<div th:insert="~{front/include::loader}"></div>
<!--js-->
<div th:insert="~{front/include::scripts}"></div>
<script th:src="@{/assets/front/js/goods/grid.js}"></script>
</body>

</html>